/**
* Copyright (c) 2022 - present TinyVue Authors.
* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
*
* Use of this source code is governed by an MIT-style license.
*
* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
*
*/

.component-css-vars-picker() {
  --ti-date-picker-width: 280px;
  --ti-date-picker-font-size: var(--ti-common-font-size-base);
  --ti-date-picker-text-color: var(--ti-base-color-info-normal);
  --ti-date-picker-bg-color: var(--ti-base-color-light);
  --ti-date-picker-border-radius: var(--ti-common-border-radius-normal);
  --ti-date-picker-border-color: var(--ti-common-color-line-dividing);
  --ti-date-picker-hover-bg-color: var(--ti-base-color-brand-6);
  --ti-date-picker-disabled-text-color: var(--ti-common-color-text-disabled);
  --ti-date-picker-disabled-bg-color: var(--ti-common-color-bg-disabled);
  --ti-date-picker-selected-bg-color: #f2f2f3;
  --ti-date-picker-icon-font-size: var(--ti-common-font-size-1);
  --ti-date-picker-current-select-bg-color: var(--ti-base-color-brand);
  --ti-date-picker-current-border-color: var(--ti-base-color-brand);
  --ti-date-picker-current-border-radius: 0;
  --ti-date-picker-range-bg-color: var(--ti-base-color-brand-6);
  --ti-date-picker-range-hover-bg-color: var(--ti-base-color-brand-6);

  --ti-date-table-td-width: 36px;
  --ti-date-table-td-height: 34px;
  --ti-date-table-td-padding-vertical: 4px;
  --ti-date-table-td-padding-horizontal: 0;
  --ti-date-table-td-span-width: 36px;
  --ti-date-table-td-span-height: 24px;
  --ti-date-table-th-text-color: var(--ti-base-color-common-3);
  --ti-date-table-td-border-radius: 0;
  --ti-date-table-td-pre-month-text-color: var(--ti-base-color-common-3);
  --ti-date-table-td-nomal-text-color: var(--ti-base-color-light);
  --ti-date-table-td-range-bg-color: #f2f6fc;
  --ti-date-table-td-today-border-color: var(--ti-base-color-brand);
  --ti-date-table-td-today-text-color: var(--ti-date-picker-text-color);
  --ti-date-table-week-current-bg-color: var(--ti-base-color-brand-6);
  --ti-date-table-week-current-hover-bg-color: var(--ti-base-color-brand-5);

  --ti-month-table-td-text-bg-color: var(--ti-base-color-brand-2);
  --ti-month-table-td-range-bg-color: #f2f6fc;
  --ti-month-table-td-date-text-color: var(--ti-base-color-light);
  --ti-month-table-td-date-border-radius: 24px;

  --ti-year-table-td-text-color: var(--ti-base-color-brand-2);
  --ti-year-table-td-icon-color: #303133;

  --ti-time-spinner-arrow-text-color: #909399;
  --ti-time-spinner-arrow-hover-text-color: var(--ti-base-color-brand-2);
  --ti-time-spinner-item-active-text-color: #303133;
  --ti-time-spinner-item-font-weight: 700;
  --ti-time-spinner-item-bg-color: transparent;
  --ti-time-spinner-list-border-color: transparent;

  --ti-picker-panel-line-height: var(--ti-base-size-height-minor);
  --ti-picker-panel-shortcut-font-size: var(--ti-common-font-size-1);
  --ti-picker-panel-icon-color-btn: var(--ti-base-color-common-3);
  --ti-picker-panel-icon-color-btn-hover: var(--ti-base-color-brand-2);
  --ti-picker-panel-icon-color-btn-disabled: var(--ti-base-color-bg-1);
  --ti-picker-panel-border-color: rgba(0, 0, 0, 0.15);
  --ti-picker-panel-box-shadow: 2px 3px 7px rgba(0, 0, 0, 0.15);

  --ti-date-picker-header-label-hover-text-color: var(--ti-base-color-brand-2);

  --ti-date-range-picker-header-font-size: var(--ti-common-font-size-2);
  --ti-date-range-picker-time-header-icon-color: #303133;

  --ti-time-range-picker-header-font-size: var(--ti-common-font-size-1);
  --ti-time-panel-footer-height: 36px;
  --ti-time-panel-btn-text-color: #303133;
  --ti-time-panel-btn-confirm-text-color: var(--ti-base-color-brand-2);
  --ti-range-separator-text-color: #303133;

  --ti-time-panel-border-color: var(--ti-date-picker-border-color);
  --ti-time-panel-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  --ti-time-panel-content-split-line-display: block;
  --ti-time-panel-btn-cancel-display: inline-block;
  --ti-time-panel-btn-bg-color: transparent;
  --ti-time-panel-btn-padding-vertical: 0;
  --ti-time-panel-btn-padding-horizontal: 5px;
  --ti-time-panel-btn-border-radius: var(--ti-common-border-radius-normal);
  --ti-time-panel-btn-height: 28px;
  --ti-time-panel-btn-min-width: inherit;
  --ti-time-panel-btn-font-weight: 800;
  --ti-time-panel-btn-confirm-hover-bg-color: transparent;

  --ti-date-editor-input-icon-color-fill: #575d6c;
}
